<template>
  <div>
    <el-collapse v-model="activeName">
      <el-collapse-item title="通知公告" name="1">
        <el-row>
          <el-col :span="24">
            <el-card v-for="item in noticeList.filter(item => item.status === '0')" :key="item.id" class="box-card">
              <div slot="header" class="clearfix">
                <span style="color:red;">{{ item.title }} | {{item.type === '1' ? '通知' : '公告'}}</span>
              </div>
              <div class="text item">
                <p v-html="item.content"></p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getList } from '@/api/Notice.js'

const route = useRoute()

const noticeList = ref([])

getList().then(res => {
  noticeList.value = res.data
})

onMounted(() => {

})

</script>

<style scoped lang="scss">
.box-card {
  margin-bottom: 10px;
}
</style>
